<!--  -->
<template>
    <div class="page page-contents page_hasHeader page_hasFooter">
        <o-header showReturn>
        </o-header>
        <o-panel class="wrap-content_header"
                 :list="data_1" 
                 :guttur="4"
                 title
                 :line="0"></o-panel>
        <div class="wrap-countOfExtends">{{data_2.length}}个故事接</div>    
        <o-panel v-for="(i,index) in  data_2"
                 :key="i.user"
                 :list="i"
                 link="/extend"
                 header footer></o-panel>
        <tabbar class="wrap-tabbar">
            <tabbar-item 
                    :link="tabbarData[0].link"
                    >
                <span slot="label">
                    <o-icon :name="tabbarData[0].icon"></o-icon>
                    {{tabbarData[0].label}}
                </span>
            </tabbar-item>
            <tabbar-item 
                    :link="tabbarData[1].link"
                    @click.native="isFocus = !isFocus"
                    >
                <span slot="label">
                    <o-icon :name="isFocus? 
                                   tabbarData[1].activeIcon :
                                   tabbarData[1].icon"></o-icon>
                    {{isFocus? 
                      tabbarData[1].activeLabel :
                      tabbarData[1].label}}
                </span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            data_1:{
                title: '由各种物质组成的巨型球状天体，叫做星球',
                desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            },
            data_2:this.$store.state.data2
            ,
            tabbarData: [
                {
                    icon: "edit",
                    label: "接故事",
                    link: "/continue"
                },
                {
                    icon: "plus-round",
                    label: "关注",
                    link: "",
                    activeIcon: "android-checkmark-circle",
                    activeLabel: "已关注"
                }
            ],
            isFocus: true
        };
    },

    computed: {
    },

    methods: {}
}

</script>

<style lang='less'>
.wrap-countOfExtends{
    font-size: 14px;
    color: @secondaryTextColor;
    margin: 0 0 4px;
    text-align: center;
}
.page-contents .wrap-tabbar{
    background: #FFFFFF;
    position: fixed;
    .weui-tabbar__label{
        color: @primaryColor;
        
    }
    .o-icon{
        color: @primaryColor;
        margin-right: 4px;
    }
}
.wrap-content_header .wrap-panel_desc{
    font-size: 14px;
}

</style>